<template>
	<view style="width: 100%;padding-top: 100px;">
		<view class='header'>
			<image src='/static/images/head.jpeg'></image>
		</view>
		
		<view class='content'>
			<view>申请获取以下权限</view>
			<text>获得你的公开信息(昵称，头像等)</text>
		</view>
	
		<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">
			授权登录
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		methods: {
			//授权监听
			bindGetUserInfo: function(e) {
				console.log("进入了授权监听");
				var me = this;
				if (e.detail.userInfo){
					console.log("您同意了授权");
					me.oauth();
				} else {
					console.log("您拒绝了授权");
					uni.showModal({
						title: '提示',
						content: '拒绝授权您将无法正常使用系统功能',
						showCancel:false,
						confirmColor: '#E0152E',
						success: function (res) {
						}
					});
				}
			},
			
			//认证
			oauth(){
				var me = this;
				uni.login({
					provider: 'weixin',
					success: (res1) => {
						uni.getUserInfo({
							success: function(res) {
								uni.setStorageSync('user', res.userInfo);
								uni.showModal({
									title: '提示',
									content: '授权成功',
									showCancel: false,
									confirmColor: '#1AA034',
									success: function (res) {
										if (res.confirm) {
											uni.navigateBack({
												delta: 1
											});
										}
									}
								});
							}
						});
					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}
	
	.header image {
		width: 200rpx;
		height: 200rpx;
		margin:0 auto;
		background: darkcyan;
		border:2px solid darkslategray;
        border-radius:30px;
        text-align: center;
        line-height: 200px;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin-top: 70rpx;
		font-size: 35rpx;
		width: 80%;
	}
</style>
